<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery发起restful请求</title>
    <link rel="stylesheet" href="/static/css/sweetalert2.min.css">
    <style>

        .btn-default {
            border: 1px solid black;
            background: blue;
            color: white;
            padding: 2px;
            font-size: 10px;
            margin: 5px;
            border-radius: 5px;
        }

    </style>
</head>
<body>
<button class="btn-default" id="get_request">发起异步get请求</button>
<button class="btn-default" id="post_request">发起异步post请求</button>
<button class="btn-default" id="delete_request">发起异步delete请求</button>
<button class="btn-default" id="put_request">发起异步put请求</button>
<button class="btn-default" id="patch_request">发起异步patch请求</button>
<button class="btn-default" id="patch_request_json">发起异步patch请求(使用json传参)</button>
<button class="btn-default" id="put_request_json">发起异步put请求(使用json传参)</button>
<button class="btn-default" id="request_with_array">发起携带数组的请求</button>
<button class="btn-default" id="request_with_array2">发起携带数组的请求2</button>
</body>
<script src="/static/jquery-3.4.1.js"></script>
<script src="/static/js/sweetalert2.min.js"></script>
<script>

    let getRequestButton = $('#get_request');
    let postRequestButton = $('#post_request');
    let deleteRequestButton = $('#delete_request');
    let putRequestButton = $('#put_request');
    let patchRequestButton = $('#patch_request');
    let patchRequestJsonButton = $('#patch_request_json');
    let putRequestJsonButton = $('#put_request_json');
    let requestWithArrayButton = $('#request_with_array');

    $(function () {
        requestButtonInit();
        requestWithJsonButtonInit();
    });

    function requestWithJsonButtonInit() {
        patchRequestJsonButton.on("click", function () {
            patchRequestJson();
        });
        putRequestJsonButton.on("click", function () {
            putRequestJson();
        });
    }

    function patchRequestJson() {
        let data = {
            id: 120,
            name: "熊二"
        };
        $.ajax({
            /*设置请求方式*/
            type: "patch",
            /*请求路径*/
            url: "/api/restful/json",
            /*请求携带的参数, 后台接受时使用了@RequestBody注解，需要Json字符串和指定contentType*/
            data: JSON.stringify(data),
            contentType:"application/json;charset=utf-8",
            /*是否异步*/
            async: true,
            /*返回的数据类型*/
            dataType:"json",//返回数据类型
            /*请求成功的回调函数*/
            success: function(data){
                console.log(data);
            }
        });
    }

    function putRequestJson() {
        let data = {
            id: 120,
            name: "熊二"
        };
        $.ajax({
            /*设置请求方式*/
            type: "put",
            /*请求路径*/
            url: "/api/restful/json",
            /*请求携带的参数, 后台接受时使用了@RequestBody注解，需要Json字符串和指定contentType*/
            data: JSON.stringify(data),
            contentType:"application/json;charset=utf-8",
            /*是否异步*/
            async: true,
            /*返回的数据类型*/
            dataType:"json",//返回数据类型
            /*请求成功的回调函数*/
            success: function(data){
                console.log(data);
            }
        });
    }

    function requestButtonInit() {
        getRequestButton.on("click", function () {
            getRequest();
        });
        postRequestButton.on("click", function () {
            /*
             说明:
                1. 由于get请求在项目中使用的不多, 可以使用post请求来替换read类型的请求.
             */
            postRequest();
        });
        deleteRequestButton.on("click", function () {
            /*
             说明:
                1. 顾名思义, 这个是delete类型的请求.
             */
            deleteRequest();
        });
        putRequestButton.on("click", function () {
            /*
             说明:
                1. 真正的restful风格的请求的add应该是post, 但是这里post请求被用于替换了get请求, 所以此处使用put请求作为新增.
             */
            putRequest();
        });
        patchRequestButton.on("click", function () {
            /*
             说明:
                1. patch请求用于部分更新.
             */
            patchRequest();
        });
        requestWithArrayButton.click(function () {
            let data = ['熊大', '熊二'];
            $.ajax({
                url: '/api/restful/array',
                type: 'GET',
                data: {
                    'arr': data
                },
                dataType:"json",//返回数据类型
                /*这个值是默认的传参方式, 默认可以不指定, 只有传递json时需要指定*/
                contentType: 'application/x-www-form-urlencoded',
                success: function(response){
                    console.log(response);
                }
            });
        });
        $("#request_with_array2").click(function () {
            // 前台必须传递`1,2,3`这样的格式, 后台才能接收到
            let data = ['熊大', '熊二'].join(",");
            $.ajax({
                url: '/api/request/arr2/param',
                type: 'POST',
                data: {
                    'ids': data
                },
                dataType:"json",//返回数据类型
                success: function(response){
                    console.log(response);
                }
            });
        });
    }

    function getRequest() {
        $.ajax({
            /*设置请求方式*/
            type: "get",
            /*请求路径*/
            url: "/api/restful/1",
            /*是否异步*/
            async: true,
            /*返回的数据类型*/
            dataType:"json",//返回数据类型
            /*这个值是默认的传参方式, 默认可以不指定, 只有传递json时需要指定*/
            contentType: 'application/x-www-form-urlencoded',
            /*请求成功的回调函数*/
            success: function(response){
                console.log(response);
            }
        });
    }

    function postRequest() {
        let data = {
            id: 110,
            name: "熊大"
        };
        $.ajax({
            /*设置请求方式*/
            type: "post",
            /*请求路径*/
            url: "/api/restful",
            /*请求携带的参数*/
            data: data,
            /*是否异步*/
            async: true,
            /*返回的数据类型*/
            dataType:"json",//返回数据类型
            /*这个值是默认的传参方式, 默认可以不指定, 只有传递json时需要指定*/
            contentType: 'application/x-www-form-urlencoded',
            /*请求成功的回调函数*/
            success: function(response){
                console.log(response);
            }
        });
    }

    function deleteRequest() {
        swal({
            /*提示的大标题*/
            title: "确认删除?",
            /*删除的body区域*/
            text: "确认删除吗?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText : '确认',
            cancelButtonText : "取消",
        }).then(function (result) {
            //这里是点击按钮之后的回掉函数, 一般情况下载删除之后会需要刷新表格
            console.log(result);
            if(result.value) {
                let data = {
                    id: 120,
                    name: "熊二"
                };
                $.ajax({
                    /*设置请求方式*/
                    type: "delete",
                    /*请求路径*/
                    url: "/api/restful",
                    /*请求携带的参数*/
                    data: data,
                    /*是否异步*/
                    async: true,
                    /*这个值是默认的传参方式, 默认可以不指定, 只有传递json时需要指定*/
                    contentType: 'application/x-www-form-urlencoded',
                    /*返回的数据类型*/
                    dataType:"json",//返回数据类型
                    /*请求成功的回调函数*/
                    success: function(response){
                        console.log("删除的返回值:", response);
                    }
                });
            } else {
                console.log("点击了取消按钮");
            }
        })

    }

    function putRequest() {
        let data = {
            /*这种在请求参数中添加_method也可以实现restful, 但是不美观*/
            _method: 'put',
            id: 178,
            name: "张三"
        };
        $.ajax({
            /*设置请求方式*/
            type: "post",
            /*请求路径*/
            url: "/api/restful",
            /*请求携带的参数*/
            data: data,
            /*是否异步*/
            async: true,
            /*这个值是默认的传参方式, 默认可以不指定, 只有传递json时需要指定*/
            contentType: 'application/x-www-form-urlencoded',
            /*返回的数据类型*/
            dataType:"json",//返回数据类型
            /*请求成功的回调函数*/
            success: function(response){
                console.log(response);
            }
        });
    }

    function patchRequest() {
        let data = {
            id: 120,
            name: "熊二"
        };
        $.ajax({
            /*
            功能:
                设置请求方式.
            说明:
                1. 在谷歌浏览器下, 设置为get, post, put, delete, patch均可成功请求.
             */
            type: "patch",
            /*请求路径*/
            url: "/api/restful",
            /*请求携带的参数*/
            data: data,
            /*是否异步*/
            async: true,
            /*返回的数据类型*/
            dataType:"json",//返回数据类型
            /*请求成功的回调函数*/
            success: function(data){
                console.log(data);
            }
        });
    }

</script>
</html>